import React from 'react';
import styles from './App.module.css'; // css作为模块被加载
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import { Home, SignIn, Register, Detail } from './pages'

function App() {
    return (
        <div className={styles.App}>
            <BrowserRouter>
                {/* Switch 解决页面叠加问题，每次只渲染一个路由页面 */}
                <Switch>
                    <Route path="/" component={Home} exact />
                    <Route path="/signIn" component={SignIn} />
                    <Route path="/register" component={Register} />
                    <Route path="/detail/:touristId" component={Detail} />
                    <Route render={(() => <h1>404 not found 页面</h1>)} />
                </Switch>
            </BrowserRouter>
        </div >
    );
}

export default App;
